<template>
    <TopView :search="false" :image="state.document.topView.image" title="元朔名医介绍" />
    <div class="w-full flex justify-center">
        <div class="2xl:w-3/5 xl:w-4/5 md:w-full h-full mb-5">
            <div class="md:mb-10 mb-3">
                <div class="flex justify-center my-5 text-xl md:text-3xl">创始人介绍</div>
                <div class="md:flex items-center">
                    <div class="md:w-1/2 px-5">
                        <img
                            class="w-full h-full rounded-lg"
                            :src="state.documentHome.firstTopics[0].image"
                        />
                    </div>
                    <div
                        class="md:w-1/2 py-3 px-5 text-base text-justify md:text-xl"
                    >{{ state.documentHome.firstTopics[0].content }}</div>
                </div>
            </div>

            <Hr />
            <div>
                <div class="flex justify-center my-5 text-xl md:text-3xl">元朔名医</div>
                <div class="docContainer md:flex flex-wrap justify-center">
                    <div class="md:w-64 md:h-64 px-3 py-3 flex justify-center items-center">
                        <div class="w-full h-full flex flex-col">
                            <div class="relative doctorCard w-full h-full overflow-hidden">
                                <div
                                    class="frontCard absolute flex w-full h-64 top-0 justify-center"
                                >
                                    <img
                                        class="w-full h-full"
                                        :src="state.documentHome.firstTopics[0].image"
                                    />
                                </div>
                                <div
                                    class="backCard absolute w-full h-full top-0 left-0 bg-gray-300 flex flex-col justify-around lg:justify-between items-center py-3"
                                >
                                    <div class="lg:text-xl text-lg font-bold 2xl:mt-2">
                                        <div class="lg:py-1">执业医师</div>
                                        <div class="lg:py-1">主任医师</div>
                                    </div>
                                    <div
                                        class="pr-3 pl-4 text-sm lg:text-base text-justify lg:mb-1"
                                    >个人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安人介绍，把哈哪哈拿回家安</div>
                                </div>
                            </div>
                            <div class="flex justify-center text-xl py-1 mt-2">陆备文</div>
                        </div>
                    </div>
                    <div class="md:w-64 md:h-64 px-3 py-3 flex justify-center items-center">
                        <div class="w-full h-full flex flex-col">
                            <div class="relative doctorCard w-full h-full overflow-hidden">
                                <div
                                    class="frontCard absolute flex w-full h-64 top-0 justify-center"
                                >
                                    <img
                                        class="w-full h-full"
                                        :src="state.documentHome.firstTopics[0].image"
                                    />
                                </div>
                                <div
                                    class="backCard absolute w-full h-full top-0 left-0 bg-gray-300 flex flex-col justify-around lg:justify-between items-center py-3"
                                >
                                    <div class="lg:text-xl text-lg font-bold 2xl:mt-2">
                                        <div class="lg:py-1">执业医师</div>
                                        <div class="lg:py-1">主任医师</div>
                                    </div>
                                    <div
                                        class="pr-3 pl-4 text-sm lg:text-base text-justify lg:mb-1"
                                    >个人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安人介绍，把哈哪哈拿回家安</div>
                                </div>
                            </div>
                            <div class="flex justify-center text-xl py-1 mt-2">陆备文</div>
                        </div>
                    </div>
                    <div class="md:w-64 md:h-64 px-3 py-3 flex justify-center items-center">
                        <div class="w-full h-full flex flex-col">
                            <div class="relative doctorCard w-full h-full overflow-hidden">
                                <div
                                    class="frontCard absolute flex w-full h-64 top-0 justify-center"
                                >
                                    <img
                                        class="w-full h-full"
                                        :src="state.documentHome.firstTopics[0].image"
                                    />
                                </div>
                                <div
                                    class="backCard absolute w-full h-full top-0 left-0 bg-gray-300 flex flex-col justify-around lg:justify-between items-center py-3"
                                >
                                    <div class="lg:text-xl text-lg font-bold 2xl:mt-2">
                                        <div class="lg:py-1">执业医师</div>
                                        <div class="lg:py-1">主任医师</div>
                                    </div>
                                    <div
                                        class="pr-3 pl-4 text-sm lg:text-base text-justify lg:mb-1"
                                    >个人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安人介绍，把哈哪哈拿回家安</div>
                                </div>
                            </div>
                            <div class="flex justify-center text-xl py-1 mt-2">陆备文</div>
                        </div>
                    </div>
                    <div class="md:w-64 md:h-64 px-3 py-3 flex justify-center items-center">
                        <div class="w-full h-full flex flex-col">
                            <div class="relative doctorCard w-full h-full overflow-hidden">
                                <div
                                    class="frontCard absolute flex w-full h-64 top-0 justify-center"
                                >
                                    <img
                                        class="w-full h-full"
                                        :src="state.documentHome.firstTopics[0].image"
                                    />
                                </div>
                                <div
                                    class="backCard absolute w-full h-full top-0 left-0 bg-gray-300 flex flex-col justify-around lg:justify-between items-center py-3"
                                >
                                    <div class="lg:text-xl text-lg font-bold 2xl:mt-2">
                                        <div class="lg:py-1">执业医师</div>
                                        <div class="lg:py-1">主任医师</div>
                                    </div>
                                    <div
                                        class="pr-3 pl-4 text-sm lg:text-base text-justify lg:mb-1"
                                    >个人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安人介绍，把哈哪哈拿回家安</div>
                                </div>
                            </div>
                            <div class="flex justify-center text-xl py-1 mt-2">陆备文</div>
                        </div>
                    </div>
                    <div class="md:w-64 md:h-64 px-3 py-3 flex justify-center items-center">
                        <div class="w-full h-full flex flex-col">
                            <div class="relative doctorCard w-full h-full overflow-hidden">
                                <div
                                    class="frontCard absolute flex w-full h-64 top-0 justify-center"
                                >
                                    <img
                                        class="w-full h-full"
                                        :src="state.documentHome.firstTopics[0].image"
                                    />
                                </div>
                                <div
                                    class="backCard absolute w-full h-full top-0 left-0 bg-gray-300 flex flex-col justify-around lg:justify-between items-center py-3"
                                >
                                    <div class="lg:text-xl text-lg font-bold 2xl:mt-2">
                                        <div class="lg:py-1">执业医师</div>
                                        <div class="lg:py-1">主任医师</div>
                                    </div>
                                    <div
                                        class="pr-3 pl-4 text-sm lg:text-base text-justify lg:mb-1"
                                    >个人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安人介绍，把哈哪哈拿回家安</div>
                                </div>
                            </div>
                            <div class="flex justify-center text-xl py-1 mt-2">陆备文</div>
                        </div>
                    </div>
                    <div class="md:w-64 md:h-64 px-3 py-3 flex justify-center items-center">
                        <div class="w-full h-full flex flex-col">
                            <div class="relative doctorCard w-full h-full overflow-hidden">
                                <div
                                    class="frontCard absolute flex w-full h-64 top-0 justify-center"
                                >
                                    <img
                                        class="w-full h-full"
                                        :src="state.documentHome.firstTopics[0].image"
                                    />
                                </div>
                                <div
                                    class="backCard absolute w-full h-full top-0 left-0 bg-gray-300 flex flex-col justify-around lg:justify-between items-center py-3"
                                >
                                    <div class="lg:text-xl text-lg font-bold 2xl:mt-2">
                                        <div class="lg:py-1">执业医师</div>
                                        <div class="lg:py-1">主任医师</div>
                                    </div>
                                    <div
                                        class="pr-3 pl-4 text-sm lg:text-base text-justify lg:mb-1"
                                    >个人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安人介绍，把哈哪哈拿回家安</div>
                                </div>
                            </div>
                            <div class="flex justify-center text-xl py-1 mt-2">陆备文</div>
                        </div>
                    </div>
                    <div class="md:w-64 md:h-64 px-3 py-3 flex justify-center items-center">
                        <div class="w-full h-full flex flex-col">
                            <div class="relative doctorCard w-full h-full overflow-hidden">
                                <div
                                    class="frontCard absolute flex w-full h-64 top-0 justify-center"
                                >
                                    <img
                                        class="w-full h-full"
                                        :src="state.documentHome.firstTopics[0].image"
                                    />
                                </div>
                                <div
                                    class="backCard absolute w-full h-full top-0 left-0 bg-gray-300 flex flex-col justify-around lg:justify-between items-center py-3"
                                >
                                    <div class="lg:text-xl text-lg font-bold 2xl:mt-2">
                                        <div class="lg:py-1">执业医师</div>
                                        <div class="lg:py-1">主任医师</div>
                                    </div>
                                    <div
                                        class="pr-3 pl-4 text-sm lg:text-base text-justify lg:mb-1"
                                    >个人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安人介绍，把哈哪哈拿回家安</div>
                                </div>
                            </div>
                            <div class="flex justify-center text-xl py-1 mt-2">陆备文</div>
                        </div>
                    </div>
                    <div class="md:w-64 md:h-64 px-3 py-3 flex justify-center items-center">
                        <div class="w-full h-full flex flex-col">
                            <div class="relative doctorCard w-full h-full overflow-hidden">
                                <div
                                    class="frontCard absolute flex w-full h-64 top-0 justify-center"
                                >
                                    <img
                                        class="w-full h-full"
                                        :src="state.documentHome.firstTopics[0].image"
                                    />
                                </div>
                                <div
                                    class="backCard absolute w-full h-full top-0 left-0 bg-gray-300 flex flex-col justify-around lg:justify-between items-center py-3"
                                >
                                    <div class="lg:text-xl text-lg font-bold 2xl:mt-2">
                                        <div class="lg:py-1">执业医师</div>
                                        <div class="lg:py-1">主任医师</div>
                                    </div>
                                    <div
                                        class="pr-3 pl-4 text-sm lg:text-base text-justify lg:mb-1"
                                    >个人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安人介绍，把哈哪哈拿回家安</div>
                                </div>
                            </div>
                            <div class="flex justify-center text-xl py-1 mt-2">陆备文</div>
                        </div>
                    </div>
                    <div class="md:w-64 md:h-64 px-3 py-3 flex justify-center items-center">
                        <div class="w-full h-full flex flex-col">
                            <div class="relative doctorCard w-full h-full overflow-hidden">
                                <div
                                    class="frontCard absolute flex w-full h-64 top-0 justify-center"
                                >
                                    <img
                                        class="w-full h-full"
                                        :src="state.documentHome.firstTopics[0].image"
                                    />
                                </div>
                                <div
                                    class="backCard absolute w-full h-full top-0 left-0 bg-gray-300 flex flex-col justify-around lg:justify-between items-center py-3"
                                >
                                    <div class="lg:text-xl text-lg font-bold 2xl:mt-2">
                                        <div class="lg:py-1">执业医师</div>
                                        <div class="lg:py-1">主任医师</div>
                                    </div>
                                    <div
                                        class="pr-3 pl-4 text-sm lg:text-base text-justify lg:mb-1"
                                    >个人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安,人介绍，把哈哪哈拿回家安人介绍，把哈哪哈拿回家安</div>
                                </div>
                            </div>
                            <div class="flex justify-center text-xl py-1 mt-2">陆备文</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <MyFooter breadCurb="> 医师介绍" />
</template>

<script lang="ts" setup>
import TopView from "@comps/topView.vue";
import { state } from "@utils/store";
import Hr from "@comps/smallComs/hr.vue";
import MyFooter from "@comps/footer.vue";



</script>

<style lang="scss" scoped>
body {
    perspective: 1000px;
}
@media screen and (max-width: 768px) {
    .docContainer > div {
        width: 100vw;
        height: 300px;
    }
}

.docContainer > div {
    flex: 33.33%;
}

.doctorCard {
    .frontCard {
        transition: all ease-in-out 0.8s;
        backface-visibility: hidden;
    }
    .backCard {
        transition: all ease-in-out 0.8s;
        transform: rotatey(-180deg);
        backface-visibility: hidden;
    }
}

.doctorCard:hover .backCard {
    transform: rotateY(0deg);
}
.doctorCard:hover .frontCard {
    transform: rotateY(180deg);
}
</style>